<template>
    <div>
        <tree-Charts :viewData="echartsData"></tree-Charts>
        <!-- md -->
        <div class="markdown-body">
            <treeChartsMD></treeChartsMD>
        </div>
    </div>
</template>
<script>
import treeChartsMD from "../md/treeChartsMD.md"
import treeCharts from "@/home/echart/treeCharts"
export default {
    components:{
        treeChartsMD,
        treeCharts
    },
    data() {
        return {
            echartsData:{
                viewTitle:"树形图",//标题 必填
                viewHeight:'640px',//图形高度，必填
                seiveApi:'',//接口方法
                serachParam:{},
                options:{
                    series:[{
                        type: 'tree',
                        data: [{
                            "name": "flare",
                            "children": [
                            {
                            "name": "1",
                            },
                            {
                            "name": "animate",
                            "children": [
                                {"name": "2", "value": 17010},
                                {"name": "3", "value": 5842},
                                {
                                    "name": "interpolate",
                                    "children": [
                                        {"name": "ArrayInterpolator", "value": 1983},
                                        {"name": "ColorInterpolator", "value": 2047},
                                        {"name": "DateInterpolator", "value": 1375},
                                        {"name": "Interpolator", "value": 8746},
                                        {"name": "MatrixInterpolator", "value": 2202},
                                        {"name": "NumberInterpolator", "value": 1382},
                                        {"name": "ObjectInterpolator", "value": 1629},
                                        {"name": "PointInterpolator", "value": 1675},
                                        {"name": "RectangleInterpolator", "value": 2042}
                                    ]
                                },
                                {"name": "ISchedulable", "value": 1041},
                                {"name": "Parallel", "value": 5176},
                                {"name": "Pause", "value": 449},
                                {"name": "Scheduler", "value": 5593},
                                {"name": "Sequence", "value": 5534},
                                {"name": "Transition", "value": 9201},
                                {"name": "Transitioner", "value": 19975},
                                {"name": "TransitionEvent", "value": 1116},
                                {"name": "Tween", "value": 6006}
                            ]
                            },
                            {
                            "name": "data",
                            "children": [
                                {
                                "name": "converters",
                                "children": [
                                {"name": "Converters", "value": 721},
                                {"name": "DelimitedTextConverter", "value": 4294},
                                {"name": "GraphMLConverter", "value": 9800},
                                {"name": "IDataConverter", "value": 1314},
                                {"name": "JSONConverter", "value": 2220}
                                ]
                                },
                                {"name": "DataField", "value": 1759},
                                {"name": "DataSchema", "value": 2165},
                                {"name": "DataSet", "value": 586},
                                {"name": "DataSource", "value": 3331},
                                {"name": "DataTable", "value": 772},
                                {"name": "DataUtil", "value": 3322}
                            ]
                            },
                            {
                            "name": "display",
                            "children": [
                                {"name": "DirtySprite", "value": 8833},
                                {"name": "LineSprite", "value": 1732},
                                {"name": "RectSprite", "value": 3623},
                                {"name": "TextSprite", "value": 10066}
                            ]
                            },
                            {
                            "name": "flex",
                            "children": [
                                {"name": "FlareVis", "value": 4116}
                            ]
                            },
                            {
                            "name": "physics",
                            "children": [
                                {"name": "DragForce", "value": 1082},
                                {"name": "GravityForce", "value": 1336},
                                {"name": "IForce", "value": 319},
                                {"name": "NBodyForce", "value": 10498},
                                {"name": "Particle", "value": 2822},
                                {"name": "Simulation", "value": 9983},
                                {"name": "Spring", "value": 2213},
                                {"name": "SpringForce", "value": 1681}
                            ]
                            },]
                        }],
                        left: '2%',
                        right: '2%',
                        top: '20%',
                        bottom: '8%',
                        symbol: 'emptyCircle',
                        orient: 'BT',
                        expandAndCollapse: true,
                        label: {
                            position: 'bottom',
                            rotate: 0,
                            verticalAlign: 'middle',
                            align: 'center'
                        },
                        leaves: {
                            label: {
                                position: 'top',
                                rotate: 0,
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },
                        emphasis: {
                            focus: 'descendant'
                        },
                        animationDurationUpdate: 750
                    }]
                }
            }
        };
    },
    methods: {
        
    }
}
</script>